<template>
	<view>
		<my-navbar title="通知详情"></my-navbar>
		<template v-if="code === 1002">
			<view class="noticeDetail-none">
				<image class="none-image" src="/static/notice/image_none.png"></image>
				<view class="none-text">您所访问的内容已被老师删除</view>
			</view>
		</template>
		<template v-if="code === 200">
			<view class="app-background"></view>
			<view class="noticeDetail-section notice">
				<view class="notice-title">
					<text :user-select="true" :decode="true" space="emsp">{{ detail.title }}</text>
				</view>
				<view class="notice-sender">
					<image class="sender-headicon" :src="detail.teacherPhoto ? detail.teacherPhoto : '/static/index/headicon_none.png'" mode="aspectFill"></image>
					<view>
						<text :user-select="true">{{ detail.teachSubject }}老师（{{ detail.teacherName }}）{{ detail.cretime }}</text>
					</view>
				</view>
				<view class="notice-line"></view>
				<view class="notice-content">
					<text :user-select="true" :decode="true" space="emsp">{{ detail.content }}</text>
				</view>
				<view class="notice-images">
					<view
						v-for="(i, j) in detail.photoList"
						:key="j"
						v-if="j < 9"
						class="image-item"
						:class="[detail.photoList.length == 1 ? 'single' : detail.photoList.length <= 4 ? 'double' : '']"
						@click="clickImage(j)"
					>
						<image class="item-image" :src="i.path" mode="aspectFill" @error="handleImageError($event, i, 'path')"></image>
					</view>
				</view>
				<view v-if="hometimeText" class="notice-hometime">
					<text :user-select="true">放学时间 {{ hometimeText }}</text>
				</view>
				<view class="notice-takers">
					<view v-if="i.receiveNumber" class="taker-item" v-for="(i, j) in detail.rangeList" :key="j">
						<text>@</text>
						<text :user-select="true">{{ i.gradeName }}{{ i.squadName }}班</text>
						<text :user-select="true">（{{ i.range === 'whole' ? '全班同学' : `${i.receiveNumber}人` }}）</text>
					</view>
				</view>
			</view>
			<view class="noticeDetail-section stats">
				<view class="stats-header">
					<view class="header-title">统计</view>
					<view class="header-detail" @click="clickStatsDetail">明细</view>
				</view>
				<view class="stats-content">
					<view class="content-item">
						<view class="item-value">{{ detail.receiveNumber }}</view>
						<view class="item-label">接收人数</view>
					</view>
					<view class="content-item">
						<view class="item-value">{{ detail.readNumber }}</view>
						<view class="item-label">已查看</view>
					</view>
					<view class="content-item">
						<view class="item-value">{{ detail.unreadNumber }}</view>
						<view class="item-label">未查看</view>
					</view>
				</view>
				<view class="stats-remind" v-if="detail.isCreator === 'Y' && detail.isRemind === 'N' && detail.receiveNumber !== detail.readNumber">
					<view class="remind-text">家长反馈不及时，提醒一下吧~</view>
					<view class="remind-button" @click="clickRemindButton">一键提醒</view>
				</view>
			</view>
			<view class="page-offset">
				<view class="noticeDetail-bottombar">
					<view class="bottombar-main"></view>
					<safe-area></safe-area>
				</view>
			</view>
			<view class="noticeDetail-bottombar fixed">
				<view class="bottombar-main" :class="detail.isCreator === 'Y' ? '' : 'center'">
					<view v-if="detail.isCreator === 'Y'" class="main-button custom1 app-button" hover-class="hover" @click="clickDeleteButton">删除</view>
					<view class="main-button custom2 app-button" hover-class="hover" @click="clickSendButton">再发一条</view>
				</view>
				<safe-area color="#ffffff"></safe-area>
			</view>
		</template>
		<template>
			<!-- 删除后接收人将无法查看本条内容，你确定要删除吗？ -->
			<my-popup :custom="1" :show="p_delete.show" @handle="p_delete.handle">
				<view class="popup1">
					<view class="popup1-content">删除后接收人将无法查看本条内容，你确定要删除吗？</view>
					<view class="popup1-buttons">
						<view class="button-item app-button" hover-class="hover" @click="p_delete.clickButton(0)">取消</view>
						<view class="button-item primary app-button" hover-class="hover" @click="p_delete.clickButton(1)">确定</view>
					</view>
				</view>
			</my-popup>
			<my-popup :custom="1" :show="p_wait.show" @handle="p_wait.handle">
				<view class="popup1">
					<view class="popup1-content">
						<text>您的提醒太频繁了，</text>
						<text style="color: #D9001B;">（30分钟后）</text>
						<text>可重试~</text>
					</view>
					<view class="popup1-buttons"><view class="button-item primary app-button" hover-class="hover" @click="p_wait.clickButton">确定</view></view>
				</view>
			</my-popup>
		</template>
	</view>
</template>

<script>
import util from '@/common/util';
export default {
	data() {
		return {
			id: '',
			squad: '',
			code: 0,
			detail: {},
			p_delete: {
				show: false,
				handle: fn => {
					if (fn === 'clickMask') this.p_delete.show = false;
				},
				clickButton: async id => {
					this.p_delete.show = false;
					if (id == 0) return;
					uni.showLoading({
						mask: true
					});
					let res1;
					try {
						res1 = await this.$api.notice.delete(this.id);
					} catch (err) {
						uni.hideLoading();
						this.$showToast(err.message || '删除通知失败');
						return;
					}
					uni.hideLoading();
					uni.navigateBack();
				}
			},
			p_wait: {
				show: false,
				handle: fn => {
					if (fn === 'clickMask') this.p_wait.show = false;
				},
				clickButton: () => {
					this.p_wait.show = false;
				}
			}
		};
	},
	computed: {
		hometimeText() {
			if (!this.detail.itemList || !this.detail.itemList[0]) return;
			let hometime = this.detail.itemList[0].item;
			if (uni.getSystemInfoSync().platform === 'ios') {
				hometime = hometime.replace(/-/g, '/');
			}
			return util.dateFormat('MM-dd hh:mm', new Date(hometime).getTime());
		}
	},
	methods: {
		clickDeleteButton() {
			this.p_delete.show = true;
		},
		clickSendButton() {
			uni.redirectTo({
				url: '/packageA/pages/notice/sendNotice'
			});
		},
		clickImage(current) {
			const urls = this.detail.photoList.map(i => i.path);
			uni.previewImage({
				urls,
				current
			});
		},
		clickStatsDetail() {
			uni.navigateTo({
				url: '/packageA/pages/notice/statsDetail' + `?id=${this.id}`
			});
		},
		async clickRemindButton() {
			uni.showLoading({
				mask: true
			});
			let res1;
			try {
				res1 = await this.$api.notice.remind(this.id);
			} catch (err) {
				uni.hideLoading();
				switch (err.code) {
					case 601:
						this.p_wait.show = true;
						break;
					default:
						this.$showToast(err.message || '发送提醒失败');
				}
				return;
			}
			this.detail.isRemind = 'Y';
			uni.hideLoading();
			this.$showToast('提醒成功');
		},
		async getDetail() {
			uni.showLoading({
				mask: true
			});
			let res1;
			try {
				if (this.squad) {
					res1 = await this.$api.notice.get_detail2(this.id, this.squad);
				} else {
					res1 = await this.$api.notice.get_detail1(this.id);
				}
			} catch (err) {
				this.code = err.code;
				uni.hideLoading();
				this.$showToast(err.message || '获取通知详情失败');
				return;
			}
			this.code = res1.code;
			this.detail = res1.result;
			uni.hideLoading();
		},
		handleImageError(e, item, key) {
			item[key] = '/static/img/image_error.png';
		}
	},
	async onLoad(options) {
		this.id = options.id;
		this.squad = options.squad;
		try {
			await this.getDetail();
		} catch (err) {}
	},
	async onPullDownRefresh() {
		try {
			await this.getDetail();
		} catch (err) {}
		uni.stopPullDownRefresh();
	}
};
</script>

<style lang="less" scoped>
.noticeDetail-section {
	padding: 40rpx 0;
	background-color: #ffffff;
	margin-top: 20rpx;
}

.notice {
	color: #222222;

	.notice-title {
		font-weight: 500;
		font-size: 32rpx;
		padding: 0 30rpx;
	}

	.notice-sender {
		font-size: 28rpx;
		color: #999999;
		margin-top: 10rpx;
		padding: 0 30rpx;

		display: flex;
		align-items: center;

		.sender-headicon {
			width: 48rpx;
			height: 48rpx;
			border-radius: 50%;
			margin-right: 10rpx;
		}
	}

	.notice-line {
		border-bottom: 2rpx solid #e3e4e6;
		margin: 30rpx;
	}

	.notice-content {
		font-size: 28rpx;
		padding: 0 30rpx;
	}

	.notice-images {
		margin: 25rpx;

		display: flex;
		flex-wrap: wrap;

		.image-item {
			width: 33.33%;
			height: 200rpx;
			box-sizing: border-box;
			padding: 5rpx;

			&.double {
				width: 50%;
				height: 275rpx;
			}

			&.single {
				width: 100%;
				height: 700rpx;
			}

			.item-image {
				width: 100%;
				height: 100%;
				border-radius: 24rpx;

				border: 1rpx solid #e3e4e6;
			}
		}
	}

	.notice-hometime {
		height: 54rpx;

		font-size: 24rpx;
		color: #ff6600;
		background-color: #f2f2f2;
		border-radius: 8rpx;
		margin: 20rpx 30rpx 0 30rpx;

		display: flex;
		align-items: center;

		&::before {
			content: '';
			width: 40rpx;
			height: 40rpx;

			background-image: url(/static/notice/icon_initial.png);
			background-size: 100%;
			background-repeat: no-repeat;

			margin: 0 11rpx;
		}
	}

	.notice-takers {
		font-size: 24rpx;
		color: #ff6600;
		padding: 0 15rpx;
		margin-top: 10rpx;

		display: flex;
		flex-wrap: wrap;

		.taker-item {
			height: 48rpx;
			background-color: #f2f2f2;
			border-radius: 24rpx;
			padding: 0 20rpx;
			margin: 10rpx 15rpx 0 15rpx;

			display: flex;
			align-items: center;
		}
	}
}

.stats {
	.stats-header {
		padding: 0 30rpx;

		font-size: 32rpx;
		color: #222222;

		display: flex;
		align-items: center;
		justify-content: space-between;

		.header-title {
			font-weight: 500;
		}

		.header-detail {
			font-size: 28rpx;
			color: #999999;

			display: flex;
			align-items: center;

			transition: all 0.3s;

			&:active {
				opacity: 0.5;
			}

			&::after {
				content: '';
				width: 13rpx;
				height: 23rpx;
				background-image: url(/static/notice/icon_right.png);
				background-size: 100%;
				background-repeat: no-repeat;
				margin-left: 10rpx;
			}
		}
	}

	.stats-content {
		padding: 30rpx 0;
		display: flex;
		justify-content: space-around;

		.content-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.item-value {
				font-size: 36rpx;
				color: #222222;
			}

			.item-label {
				font-size: 28rpx;
				color: #999999;
			}
		}
	}

	.stats-remind {
		height: 72rpx;
		background-color: #f2f2f2;
		border-radius: 8rpx;
		padding: 0 20rpx;
		margin: 0 30rpx;

		font-size: 28rpx;

		display: flex;
		align-items: center;
		justify-content: space-between;

		.remind-text {
			color: #222222;
			display: flex;
			align-items: center;

			&::before {
				content: '';
				width: 35rpx;
				height: 28rpx;
				background-image: url(/static/notice/icon_trumpet.png);
				background-size: 100%;
				background-repeat: no-repeat;
				margin-right: 10rpx;
			}
		}

		.remind-button {
			width: 148rpx;
			height: 48rpx;
			border: 2rpx solid #ff6600;
			border-radius: 30rpx;

			transition: all 0.3s;

			color: #ff6600;

			display: flex;
			align-items: center;
			justify-content: center;

			&:active {
				opacity: 0.5;
			}
		}
	}
}

.noticeDetail-bottombar {
	.bottombar-main {
		height: 112rpx;
	}

	&.fixed {
		position: fixed;
		bottom: 0;

		.bottombar-main {
			width: 750rpx;
			background-color: #ffffff;
			border-top: 2rpx solid #e3e4e6;
			padding: 0 47rpx;
			box-sizing: border-box;

			display: flex;
			align-items: center;
			justify-content: space-between;

			&.center {
				justify-content: center;
			}

			.main-button {
				width: 304rpx;
				height: 80rpx;
				border-radius: 60rpx;

				font-size: 33rpx;

				display: flex;
				align-items: center;
				justify-content: center;

				&:only-child {
					width: 690rpx;
				}

				&.custom1 {
					color: #222222;
					border: 2rpx solid #e3e4e6;
				}

				&.custom2 {
					color: #ffffff;
					background-image: var(--background-color-gradient--);
				}
			}
		}
	}
}

.noticeDetail-none {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 130rpx;

	.none-image {
		width: 300rpx;
		height: 300rpx;
	}

	.none-text {
		font-size: 28rpx;
		color: #707070;
		margin-top: 60rpx;
	}
}

.popup1 {
	width: 594rpx;
	border-radius: 30rpx;
	background-color: #ffffff;
	overflow: hidden;

	color: #222222;

	.popup1-title {
		font-size: 36rpx;
		text-align: center;
		font-weight: 700;

		padding-top: 60rpx;
	}

	.popup1-content {
		line-height: 60rpx;
		padding: 40rpx 30rpx;

		font-size: 32rpx;
		text-align: center;
	}

	.popup1-buttons {
		height: 90rpx;
		border-top: 2rpx solid #e3e4e699;

		display: flex;

		.button-item {
			flex: 1;
			border-right: 2rpx solid #e3e4e699;

			position: relative;

			font-size: 32rpx;
			font-weight: 500;
			color: #222222;

			display: flex;
			align-items: center;
			justify-content: center;

			&:last-child {
				border-right: none;
			}

			&.primary {
				color: #ff6600;
			}
		}
	}
}
</style>
